<template>
  <div class="shop">
    <div class="add_resaudit">
      <el-button size='small'
        type='primary'
        @click="addResidenceAudit">新增入驻商户</el-button>
    </div>
    <el-form :inline="true"
      size="mini"
      class="form">
      <el-form-item label="所属区域:">
        <el-select style="width:130px;"
          v-model="province"
          filterable
          placeholder="省份"
          @change="onChangeProvince">
          <el-option v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
        <el-select style="width:130px;"
          v-model="city"
          filterable
          placeholder="市"
          @change="onChangeCity">
          <el-option v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
        <el-select style="width:130px;"
          v-model="area"
          filterable
          placeholder="区">
          <el-option v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.areaCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='入驻状态:'>
        <el-select style="width:100px;"
          v-model="form.enter_status"
          filterable
          placeholder="全部">
          <el-option v-for="item in statusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='提交时间:'>
        <el-date-picker v-model="form.commit_time_start"
          type="date"
          style="width:136px"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间">
        </el-date-picker> ~ <el-date-picker v-model="form.commit_time_end"
          type="date"
          style="width:136px"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-input class="input"
        v-model="form.shop_name"
        placeholder="输入小店名称搜索"
        clearable
        size='mini'></el-input>
         <el-input class="input"
        v-model="form.id"
        placeholder="输入ID搜索"
        clearable
        size='mini'></el-input>
      <el-button type="primary"
        @click="searchShopGroup"
        size='mini'>搜索</el-button>
      </el-form-item>
    </el-form>



    <el-table class="table"
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='UID' prop='uid'></el-table-column>
      <el-table-column label='幕后街名称' prop='shop_name' width='100'></el-table-column>
      <el-table-column label='账号' prop='user_name' width='100'></el-table-column>
      <el-table-column label='所属区域' width='180'>
        <template slot-scope="scope">
          {{scope.row.province}}.{{scope.row.city}}.{{scope.row.area}}
        </template>
      </el-table-column>
      <el-table-column label='商家分类' prop='type_word'></el-table-column>
      <el-table-column label='邀请者账号'  width='160'>
        <template slot-scope="scope">
          <span v-if="scope.row.invitation_user_mobile">{{scope.row.invitation_user_mobile}}</span>
          <span v-else>--</span><span  v-if="!scope.row.invitation_user_mobile" @click="lookInviteAccount(scope.row.uid)" class="lookInvite">(新增)</span>
        </template>
      </el-table-column>
      <el-table-column label='提交时间' prop='enter_valid_time' width='160'></el-table-column>
      <el-table-column label='入驻状态' >
        <template slot-scope="scope">
          <!-- <p v-if='scope.row.status == 1'>入驻中</p>
          <p v-if='scope.row.status == 2'>已过期</p> -->
          <p>{{scope.row.enter_status_word}}</p>
        </template>
      </el-table-column>
      <el-table-column label='操作' fixed='right' width='360'>
        <template slot-scope="scope">
          <el-button type='primary' size='mini' @click="watchDetail(scope.row.id)">详情</el-button>
        <el-button type='danager' size='mini' @click="accomponyInformation(scope.row.id)">完善信息</el-button>
        <el-button  type="danager" size="mini" @click="settingVipShop(scope.row.id)">设为会员店</el-button>
        <el-button type='primary' size='mini' @click='deleteManagement(scope.row.id)'>移除</el-button>
        </template>
      </el-table-column>
    </el-table>

     <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增邀请者账号" :visible.sync='isAddInviteAccount' width='500px'>
       <el-form  style="padding:20px;" label-width="140">
         <el-form-item label="邀请者身份:">
           <el-select style="width:300px;"
          v-model="inviteForm.inviteStatus"
          filterable
          placeholder="请选择身份">
            <el-option label="合伙人/区域代理"
            value="2"></el-option>
            <el-option label="服务商"
            value="5"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="推荐人账号:">
           <el-input type="number" min="0" style="width:300px;margin-right:12px;" placeholder="请输入推荐人账号" v-model="inviteForm.inviteAccount"></el-input>
           <el-button size="mini" @click="editAccount">检测</el-button>
           <p style="font-size:10px;margin-left:80px;">幕后街推荐人账号必须是服务商或者代理身份账号，否则无效</p>
         </el-form-item>
       </el-form>

       <div style="text-align:center;margin:16px 0;">
         <el-button size="mini" @click="cancelAddInvite">取消</el-button>
         <el-button size="mini" type="primary" @click="certainInviteForm">确定</el-button>
       </div>
    </jdialog>
  </div>
</template>

<script>
// import {
//   provinceCityArea,
// } from "@/api/goods";
// import {shopEnterManagerData,
// shopRemoveDetailData,
// userConfirmRole,shopAddInviterWithuserId,
// shopWithShopIdSetVipShop} from '@/api/shopdetail';
export default {
  data () {
    return {
      province: "",
      provinceList: [],

      city: "",
      cityList: [],

      area: "",
      areaList: [],

      statusList: [{ id: 0, 'name': '全部' }, { id: 1, 'name': '入驻中' }, { id: 3, 'name': '已过期' }],

     form: {
        id:'',
        shop_name:'',
        page:1,
        city_area:'',
        ad_code:'',
        enter_status:'',
        commit_time_end:'',
        commit_time_start:'',
      },

      tableData: [],
      total:0,


      //新增邀请者账号
      isAddInviteAccount:false,
      inviteId:'',
      inviteForm:{
        inviteStatus:'',
        inviteAccount:'',
      }

    }
  },
  created () {
    this.getProvinceDataList("1", "0");
  },

  mounted () {
      this.getshopEnterManagerData()
  },
  methods: {

    addResidenceAudit () {
      this.$router.push({
        path: "./residenceinformation",
        query: { type:2}
      });
    },
    searchShopGroup () {
      this.form.page = 1
      this.getshopEnterManagerData()
    },
     pageChange(page){
      this.form.page = page
      this.getshopEnterManagerData()
    },
    watchDetail (id){
       this.$router.push({
        path: "./residenceinformation",
        query: { cid: id ,type:2,isWatchOrEdit:true}
      });
    },
    accomponyInformation (id) {
       this.$router.push({
        path: "./residenceinformation",
        query: { cid: id ,type:2,isWatchOrEdit:false}
      });
    },
    deleteManagement (id) {
       this.$confirm("确定移除该小店?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除小店
         this.getshopRemoveDetailData(id)
      });
    },
    onChangeProvince (e) {
      this.province = e;
      //后面加获取对应省的城市接口
      this.city = "";
      this.area = "";
      this.getProvinceDataList("2", e);
    },
    onChangeCity (e) {
      this.city = e;
      this.area = "";
      //获取对应城市的区
      this.getProvinceDataList("3", e);
    },

    //设为会员店
    settingVipShop(id){
      this.getshopWithShopIdSetVipShopdata(id)
    },
    async getshopWithShopIdSetVipShopdata(id){
      let res = await shopWithShopIdSetVipShop(id)
       if(res.code === 10000){
        this.$methods.success(res.message)
      }else{
        this.$message.error(res.message)
      }

    },
    //获取省列表
    async getProvinceDataList (t, p) {
      let res = await provinceCityArea({ type: t, pid: p });

      if (res.code === 10000) {
        if (t === "1") {
          this.provinceList = res.data;
        } else if (t === "2") {
          this.cityList = res.data;
        } else {
          this.areaList = res.data;
        }
      }
    },
    //新增邀请者账号
    lookInviteAccount(id){
      this.inviteId = id
      this.isAddInviteAccount = true

    },
    certainInviteForm(){
      this.getshopAddInviterWithuserIdData()
    },

    cancelAddInvite(){
       this.isAddInviteAccount = false
       this.inviteForm = {
         inviteStatus:'',
        inviteAccount:'',
       }
    },
    //检测账号
    editAccount(){
      this.getuserConfirmRoleData()
    },

    //确认用户角色
    async getuserConfirmRoleData(){
        if(!this.inviteForm.inviteStatus){
          this.$message.error('请选择邀请者身份')
          return
        }

        if(!this.inviteForm.inviteAccount){
          this.$message.error('请填写推荐人账号')
          return
        }

        var url = 'role='+this.inviteForm.inviteStatus+
                  '&mobile='+this.inviteForm.inviteAccount
        let res  = await  userConfirmRole(url)

        if(res.code === 10000){
          console.log(res.data.is_true)
           if(String(res.data.is_true) == 'true'){
             this.$message.success('推荐人账号为有效的')
           }else{
             this.$message.error('推荐人账号为无效的')
           }
        }else{
          this.$message.error(res.message)
        }
    },
    //添加邀请者
    async getshopAddInviterWithuserIdData(){

       if(!this.inviteForm.inviteStatus){
          this.$message.error('请选择邀请者身份')
          return
        }

        if(!this.inviteForm.inviteAccount){
          this.$message.error('请填写推荐人账号')
          return
        }

       let res = await shopAddInviterWithuserId({
          invitation_mobile:this.inviteForm.inviteAccount,
          uid:this.inviteId
       })
       if(res.code === 10000){
         this.$message.success(res.message)
          this.isAddInviteAccount = false
       this.inviteForm = {
         inviteStatus:'',
        inviteAccount:'',
       }
       this.getshopEnterManagerData()
       }else{
        this.$message.error(res.message)
       }
    },
    async getshopEnterManagerData(){
      if (
        (this.province && !this.city) ||
        (this.province && !this.area && !this.city)
      ) {
        this.$message.error("市或区不能为空");
        return;
      }
      if (this.area) {
        this.form.city_area = 3;
        this.form.ad_code = this.area;
      } else if (this.city) {
        this.form.city_area = 2;
        this.form.ad_code = this.city;
      } else {
        this.form.city_area = 0;
        this.form.ad_code = "";
      }
       if(!this.form.commit_time_start){
        this.form.commit_time_start = ''
      }
      if(!this.form.commit_time_end){
        this.form.commit_time_end = ''
      }
      if(this.form.enter_status == 0){
        this.form.enter_status =''
      }
       var url = "page="+this.form.page+
                "&city_area="+this.form.city_area+
                "&ad_code="+this.form.ad_code+
                "&enter_status="+this.form.enter_status+
                "&id="+this.form.id+
                "&shop_name="+this.form.shop_name
       let res  = await shopEnterManagerData(url)
       this.tableData =res.data.data
       this.total = res.data.total
    },
    async getshopRemoveDetailData(id){
      let res  = await shopRemoveDetailData(id)
      if(res.code === 10000){
         this.$message.success('移除成功')
         this.getshopEnterManagerData()
      }else {
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;
  .form {
    margin-top: 42px;
    float: left;
  }
  .lookInvite{
    cursor: pointer;
    color: #f4222d;
  }
  .add_resaudit {
    float: right;
  }
  .search {
    float: right;
    position: absolute;
    top: 64px;
    right: 20px;
  }
  .input {
    width: 130px;
  }
  .pagination{
  float: right;
  margin-top: 15px;
  }
}
</style>
